* {
    margin:0;
    padding: 0;
  box-sizing: border-box;
}
body {
    font-family: 'Microsoft Yahei','SimHei',Arial, sans-serif;
    background-color:#ffffff;
    color:black;
    line-height: 1.6;
}

header {
    width:100%;
    max-width:1200px;
/*流体布局+最大宽度限制  常用的响应式设计*/

    margin:0 auto;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.banner {
    width:100%;
    height:300px;
    background: linear-gradient(135deg,#8B4513 0%,#654321 100%);/* 渐变颜色 度数，从0% 到100% */
    display:flex;
    align-content:center;
    justify-content:center;
    overflow:hidden;/*溢出容器的部分截掉*/
}

.banner img {
    width:100%;
    height:100%;
    object-fit:cover;/* 保持比例，裁剪多余部分 */    
}

/*导航栏*/
nav {
background-color:#E3F2FD;
padding:15px 0;
border-top: 2px solid #BBDEFB
}

nav ul {
    list-style:none;
    display:flex;
    justify-content: center;
    max-width:1200px;
    padding:0 20px;
}

nav li {
    padding:0 20px;
}

nav li:not(:last-child)::after {
    /*li除掉最后一个元素，每个后面都添加了一个伪元素*/
    content:'|';
    position:absolute;
    right:0;
    color:#90CAF9;
}

nav a:hover {
    color:#0D47A1;
    text-decoration:underline;
}

/*主容器*/
.container {
    max-width:1200px;
    margin:0 auto;
    padding:20px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/*主要内容*/
main {
   display:flex;
   /*元素间间隔20px*/
   gap:20px;
   margin-top:20px;
}

/*左侧边栏*/
aside {
   /*flex: <flex-grow> <flex-shrink> <flex-basis>; */
    flex:0 0 300px;/*不放大 不缩小 固定宽度*/
    background-color: #fff;
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

aside h2 {
 color: #1976d2;
 font-size:24px;
 margin-bottom:20px;
text-align: center;
border-bottom: 2px solid #90CAF9
}

.menu-table{
    width:100%;
    border-collapse:collapse;/*有边框*/
    margin-bottom:20px;
    background:#fff;
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,0.1)
}

.menu-table th {
    background-color: #BBDEFB;
    color:#1976d2;
    padding:12px 8px;
    text-align: center;
    font-size:14px;
    font-weight:600;
}

.menu-table th:first-child {
    background-color: transparent;
    /*完全透明 覆盖之父选择器设置的背景色*/
    border:none;
}

.menu-table td {
    padding:10px 8px;
    text-align:center;
    border-bottom:1px solid #E3F2FD;
    font-size:14px;
}

.menu-table td:first-child {
    text-align:left;
    font-weight:500;
    color:#1976d2;
}

.menu-table tr:last-child td{
    border_bottom:none;
}

.menu-table tr:hover{
    background-color: #F5F5F5;
}

.price {
    color:#D32F2F;
    font-weight:600;
}

/*缩略图*/
.suoluetu {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
}

.suoluetu {
    width:100%;
    height:100px;
    object-fit:cover;
    border:3px solid #fff;
    border-radius:0 2px 5px rgba(0,0,0,0.1);
    transform: rotate(-2deg);/*旋转*/
    transition:transform 0.3s;/*当transform发生变化时 会有一个0.3s的过渡*/

}

.suoluetu:hover{
    transform:rotate(0deg) scale(1.05);

}

.coffee-item{
    display:flex;
    gap:20px;
    margin-bottom:30px;
    padding:20px;
    background-color: #FAFAFA;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transition:box-shadow 0.3s;
}

.coffee-item:hover{
    box-shadow: 0 4px 12px(0,0,0,0.13);
}

.coffee-item:nth-child(even) {
    flex-directtion:row-reverse;
}

.coffee-image {
    flex:0 0 200px;
    height:200px;
}

.coffee-image img {
    width:100%;
    height:100%;
    object-fit: cover;
    border:4px solid #fff;/*示画一条 4 像素宽、实线、颜色为白色的边框；*/
    border-radius: 8px;/*四个角会被“圆滑”处理*/
    box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.coffee-text {
     flex: 1;
 }

 .coffee-text h3 {
    color: #1976D2;
    font-size: 28px;
    margin-bottom: 8px;
 }

         .coffee-text .english-name {
            color: #666;
            font-size: 16px;
            font-style: italic;
            margin-bottom: 15px;
        }

        .coffee-text p {
            color: #555;
            font-size: 15px;
            line-height: 1.8;
            text-align: justify;
        }

  
        /*页脚*/
        footer {
            background-color: #E3F2FD;
            text-align:center;
            padding:20px 0;
            margin-top:20px;
            color:#1976D2;
            font-size:14px;
            border-top:2px solid #BBDEFB;}

         footer img{
            width:100%;
            height:100%;
            object-fit: cover;
         

         }   

         /*响应式设计*/
         @media (max-width: 768px){
            /*768px 能覆盖绝大部分平板和大屏手机，实现从桌面布局到移动布局的自然过渡*/
            main{
                flex-direction:column;
            }
            aside{
                flex:1;/*aside固定不变*/
            }
            .coffee-item {
                flex-direction:column !important;
                /*移动端改成垂直堆叠，即图片和文字垂直排列，重要性超过之前的*/
            }
            .coffee-image {
                flex:1;
                height:250px;
                /*这行的作用是在移动端给图片盒子提供一个更适合的固定高度
                （250px），同时避免因为 height: 100% 而造成高度塌陷。(因为此时如果直接去掉coffee-image盒子的高度，默认auto，，此时img又没有具体高度，就会崩塌)
                桌面端用 200px 是为了方正的缩略图，
                移动端用 250px 则是为了纵向展示时更好看、更稳定。*/
            }

            nav ul {
                flex-wrap:wrap;
                /*flex元素被打断换行*/
            }

            nav li{
                padding:5px 10px;/*针对美观和适用性做出的调整*/
            }
        }   